<template>
    <el-card shadow="never">
        <div>
            <el-button type="primary">添加配送员</el-button>
        </div>

        <el-table :data="tableData.rows">
            <el-table-column label="头像" prop="avatar">
                <template #default="scope">
                    <!-- {{ scope.row }} -->
                    <img :src="scope.row.avatar" height="34px" alt="">
                </template>
            </el-table-column>


            <el-table-column label="名称" prop="name" />
            <el-table-column label="手机号码" prop="phone" />
        </el-table>
    </el-card>
</template>

<script setup lang="ts">
import { findCourierApi } from '@/api/courier';
import { onMounted, reactive } from 'vue';

const tableData = reactive({
    rows: [],   // 配送员数组
    total: 0    // 配送员数据总条数（分页用）
})

onMounted(() => {
    findCourier();
})

function findCourier() {
    findCourierApi().then((res: any) => {
        if (res.code == 200) {
            tableData.rows = res.data.rows;
            tableData.total = res.data.total;
        }
    })
}
</script>

<style scoped></style>